<template>
    <VueUs3 clearable
            label="地点"
            name="role"
            placeholder="请选择地点"
            v-model="form.role"
            v-bind:columns="itemList"
            :rules="[{ required: true, message: '请选择地点' }]"/>
</template>

<script setup>
    import { reactive } from 'vue';
    import VueUs3 from "./VueUs3.vue"

    const itemList = reactive([
        { text: '杭州', value: 'Hangzhou' },
        { text: '宁波', value: 'Ningbo' },
        { text: '温州', value: 'Wenzhou' },
        { text: '绍兴', value: 'Shaoxing' },
        { text: '湖州', value: 'Huzhou' },
    ])

    const form = reactive({role: "Huzhou"})
</script>

<style scoped>

</style>